
import Articlenav from '@/components/articlenav'
import styles from '../styles/index.less'
import classNames from 'classnames'
import { ArticleModelState,   useDispatch, useSelector, history } from 'umi';
import {   useEffect } from 'react';
import { formatDate } from '@/utils/index'
import { EyeOutlined, HeartOutlined, PartitionOutlined } from '@ant-design/icons';
import Recommendread from "@/components/essay/recommendread"
import Articlecategory from "@/components/essay/Articlecategory"
import styless from '@/components/essay/index.less';
import Popup from '@/components/Popup';
import { IArticleItem } from '@/types';
function CategoryReading() {

  

  const dispatch = useDispatch();
  const { getArticleFe } = useSelector((state: { article: ArticleModelState }) => state.article);

  // hooks的生命周期
  useEffect(() => {
    dispatch({
      type: 'article/getArticleReading',
    })
  }, []);

  return <div className={styles.fe}>
    <div className={classNames(styles.container, styles.view)}>
      <div className={classNames(styles.content, styles.views)}>
        <div className={styles.left}>
          <div className={styles.text}>
            <p><span className={styles.title}>Reading </span>分类文章</p>
            <p>共搜索到 <span className={styles.num}> {getArticleFe.length} </span>篇</p>
          </div>
          <div className={styles.article}>
            <Articlenav></Articlenav>
            <div className={styles.articleList}>
              {
                getArticleFe && getArticleFe.length > 0 ? getArticleFe.map((item:IArticleItem)=> {
                  return <div onClick={() => {
                    history.push(`/article/${item.id}`)
                  }} key={item.id}>
                    <div className={styles.articleListitem}>
                      <header>
                        <div className={styles.titles1}>
                          <p>{item.title}</p>
                        </div>
                        <div className={styles.titles2}>
                          <span className={classNames(styles.shu, styles.shu1)}> ︱</span>
                          <span>{formatDate(item.publishAt)}前</span>
                          {
                            item.category != null ? <span className={styles.shu}>  ︱ </span> : null
                          }
                          <span>{item.category?.label}</span>
                        </div>
                      </header>
                      <main className={styles.titleitem}>
                        {
                          item.cover != null ? <div className={styles.imgs}>
                            <img src={item.cover} alt="" />
                          </div> : null
                        }
                        <div className={styles.rightitem}>
                          <p>{item.summary}</p>
                          <div>
                            <span><i><HeartOutlined /></i> {item.likes}</span>
                            {/* <b>.</b> */}
                            <span><i><EyeOutlined /></i> {item.views}</span>
                            {/* <b>.</b> */}
                            <span><Popup ProputItem={item}><i><PartitionOutlined /></i>分享</Popup></span>

                          </div>
                        </div>
                      </main>
                    </div>

                  </div>
                }) : <div className={styles.nodate}>暂无数据</div>
              }
            </div>
          </div>
        </div>
        <div className={styless.sidebar}>
          <div className={styless.sidebarins_1}>
            <div className={styless.sidebarins_2}>
              <Recommendread />
            </div>
            <div className={styless.sidebarins_3}>
              <Articlecategory />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
}

export default CategoryReading